<template>
   
    <div class="head" style="margin-bottom: 10px;margin-top: 10px;">
     <el-input type="text" style="height: 30px;width:250px" placeholder="请输入套餐名称"
       v-model="searchName">
        <template #prefix>
          <el-icon class="el-input__icon"><el-icon><Search /></el-icon></el-icon>
        </template>
     </el-input>
     <el-button type="primary" style="margin-right: 800px;" @click="search">搜索</el-button>
          <!-- 分类搜索 -->
          <el-select v-model="categorySearchName" placeholder="选择分类" 
      style="position: absolute;left: 600px;width: 150px;">
         <el-option v-for="(item,index) in category" :lable="item" :key="index" :value="item.name"
          @click="search">
         </el-option>
      </el-select>
       <!-- 售卖状态搜索 -->
     <el-select v-model="statusSearchName" placeholder="选择状态" 
       style="position: absolute;left: 800px;width: 150px;">
         <el-option @click="statusSearch('在售')">在售</el-option>
         <el-option @click="statusSearch('停售')">停售</el-option>
      </el-select>
     <el-button type="primary" @click="router.push('/addtaocan')" style="margin-right: 20px;">新增套餐</el-button>
     <!-- <el-button type="primary">新增套餐分类</el-button> -->
    </div>
    
    <el-table :data="tableData" border style="width: 100%;height: 550px;" stripe 
     ref="multipleTableRef"
     @selection-change="handleSelectionChange" >
     <el-table-column type="selection" width="45" align="center"/>
     <el-table-column prop="name" label="套餐名称" width="180" align="center"/>
     <el-table-column prop="img" label="套餐图片" width="180" align="center">
        <template #default="scope">
        <div class="demo-image__preview">
         <el-image
            style="width: 100px; height: 100px"
            :src="taocanImgUrl+scope.row.img"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="imgList"
            :initial-index="4"
            fit="cover"
            />
        </div>
        </template>
     </el-table-column>
     <el-table-column prop="category" label="套餐分类" width="100px" align="center"/>
     <el-table-column prop="price" label="套餐价"  width="120px" align="center"/>
     <el-table-column prop="status" label="售卖状态"  width="110px" align="center">
      <template #default="scope">
          <el-tag type="default" v-if="scope.row.status=='在售卖'">
             {{ scope.row.status }}
          </el-tag>
          <el-tag type="danger" v-if="scope.row.status=='停售'">
             {{ scope.row.status }}
          </el-tag>
         </template>
     </el-table-column>
     <el-table-column prop="updateTime" label="最后操作时间" width="180px" align="center"/>
     <el-table-column  label="操作">
      <template #default="scope">
          <el-button @click="showTaocan(scope.row)">详情</el-button>
          <el-button type="primary" @click="updateTaocan(scope.row.id)">修改</el-button>
          <el-button type="danger" @click="deleteOne(scope.$index,scope.row)">删除</el-button>
          <el-button v-if="scope.row.status=='停售'"  @click="changeStatus(scope.$index,scope.row)">起售</el-button>
          <el-button v-if="scope.row.status=='在售'"  @click="changeStatus(scope.$index,scope.row)">停售</el-button>
         </template>
     </el-table-column>
    </el-table>
 
 <!-- 分页组件 -->
 <el-pagination background layout="prev, pager, next,sizes" :total="total" 
   :page-sizes="[10, 15, 20, 25]"
   v-model:current-page="currentPage"
   v-model:page-size="pageSize"
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"/>
 
  
     <!-- 删除套餐对话框 -->
     <el-dialog
    v-model="delDialogVisible"
    title="Warning"
    width="30%"
    align-center
  >
    <span>你确定要删除所选套餐吗?</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="delDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteYes">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


<!-- 查看详情展示界面 -->
 <el-dialog
    v-model="showInfoVisible"
    title="套餐详情"
    width="60%"
    align-center
  >
   
      <span class="dialog-footer">
       <div style="float: left;">
          <div style="font-size: 18px;font-weight: 700;margin-bottom: 20px;">{{ info.name }}</div>
        <el-image style="width: 200px; height: 200px"
            :src="taocanImgUrl+info.img"/>
          <div>套餐分类:{{ info.category }}</div>
          <div>套餐价格:{{ info.price }}</div>
       </div>
       
        <div style="float: left;margin-left: 100px;">
         <div>菜品列表，数量，单价</div> 
         <li v-for="(item,index) in info.dishlist" :key="index">
            {{ item.dishname }}
            {{ item.number }}
            {{ item.price }}
         </li>
        </div>
          
      </span>
    
  </el-dialog>
 

 
 </template>
 
 <script setup lang="ts">
 
 import { ref } from 'vue'
 import { ElTable ,ElMessage} from 'element-plus'
 //导入日期工具
 import  {time} from '../utils/time'
 import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import taocanApi from '@/api/taocan';
 //导入套餐图片下载地址
 import {taocanImgUrl} from '@/config/imgconfig'
import { useStore } from 'vuex';
import categoryApi from '@/api/category';
import taocanDishApi from '@/api/taocanDishApi';

 const router = useRouter()
 const store = useStore()

//套餐详情展示对话框
const showInfoVisible = ref(false)
//展示套餐详情
const showTaocan=async (row:any)=>{
   showInfoVisible.value = true
   info.value.name = row.name
   info.value.price = row.price,
   info.value.category =row.category
   info.value.img = row.img
   const res = await taocanDishApi.getDishesRef(row.id)
   if(res.code===200){
      info.value.dishlist = res.data
   }

}
//套餐详情，每点击不同的套餐就会改变
const info = ref({
   name:'',
   price:0,
   category:'',
   dishlist:[],
   img:''
})





 
 interface Taocan {
   name: string
   img: string
   gategory:string
   price:number
   status:string
   time:string
 }
 //多选功能
 const multipleTableRef = ref<InstanceType<typeof ElTable>>()
 const multipleSelection = ref<Taocan[]>([])
 const toggleSelection = (rows?: Taocan[]) => {
   if (rows) {
     rows.forEach((row) => {
       // TODO: improvement typing when refactor table
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       multipleTableRef.value!.toggleRowSelection(row, undefined)
     })
   } else {
     multipleTableRef.value!.clearSelection()
   }
 }
 const handleSelectionChange = (val: Taocan[]) => {
   multipleSelection.value = val
 }
 
 
  const tableData = ref([])
   //图片列表
  const imgList = ref([{}])
 

   onMounted(()=>{
      getTaocan(),
      //获取套餐分类
      getTaocnCates()
   })
 
//分页查询相关
const currentPage = ref(1)
 const pageSize = ref(10)
 const total = ref(0)

 const handleSizeChange = (val: number) => {
    getTaocan()
 }
 const handleCurrentChange = (val: number) => {
    getTaocan()
 }

 //搜索部分
  //搜索菜品名称
 const searchName = ref('')
 const statusSearchName = ref('在售')
 //分类搜索名称
 const categorySearchName = ref('')
//根据状态搜索
const statusSearch=(status:any)=>{
    statusSearchName.value = status
    search()
}

//根据菜品名称搜索菜品
 const search=async ()=>{
    //构建搜索map对象
    const map = {
      name:searchName.value,
      category:categorySearchName.value,
      status:statusSearchName.value
    }
    var res = await taocanApi.pageSearchWrapper(currentPage.value,pageSize.value,map)
    if(res.code == 200){
       tableData.value = res.data.list
       total.value = res.data.total
    }
  }

//获取套餐
async function getTaocan(){
   const res = await taocanApi.getTaoCans(currentPage.value,pageSize.value)
   if(res.code===200){
      tableData.value = res.data.list
      total.value = res.data.total
   }else{
      ElMessage({"message":res.data,"type":"error"})
   }
}
//套餐分类集合
const category =ref([])
//获取所有的套餐分类
async function getTaocnCates() {
   const res = await categoryApi.getTaocanCate()
   if(res.code===200){category.value = res.data}
   else{ElMessage({"message":res.data,"type":"error"})}
}


   //改变状态
   const changeStatus=async (index:number,row:any)=>{
    var flag = 0;
     if(row.status == '在售'){
        flag = 0;
        //  tableData.value[index].status = '停售'
      }else {
         flag = 1;
      }
   const res = await taocanApi.changeStatus(tableData.value[index].id,flag)
   if(res.code===200){
      ElMessage({"message":res.data,"type":"success"})
      getTaocan()
   }else{
     ElMessage({"message":res.data,"type":"error"})
   }
     
 }
 
 //修改套餐
 //,路由传参，跳转
  const updateTaocan =(id:any)=>{
  //给store中保存taocanid
    store.state.taocanId = id;
    router.push({path:`/updatetaocan/${id}`})
}

const delDialogVisible = ref(false)
 //用来保存待删除的索引数组
 const delIndexs = ref([0])
//删除套餐
 //判断是单个删除还是批量删除(开始是单个删除)
 const delOneOrAll = ref(false)
 //删除单个菜品
 const deleteOne=(index:number,row:any)=>{
   delDialogVisible.value = true
   delOneOrAll.value = false
   delIndexs.value[0] = tableData.value[index].id
 }
 //按下确定删除按钮
 const deleteYes=async ()=>{
     var ids: any[] = []
    if(delOneOrAll.value===false){
        ids = delIndexs.value
    }else{
        multipleSelection.value.forEach(item =>{
           ids.push(item.id)
        })
    }

    const data = await taocanApi.deleteTaocans(ids)
    if(data.code===200){
       delDialogVisible.value = false
       //在执行一遍查询操作
       getTaocan()
    }else{
      ElMessage({"message":data.data,"type":"error"})
    }
 }

 //批量删除
 const batchDel=()=>{
   delDialogVisible.value = true
   delOneOrAll.value = true
 }






 //const updateMsg =()=>{ElMessage({message:'修改功能暂未开发', type :'warning'})}
 const deleteMsg =()=>{ElMessage({message:'删除功能暂未开发', type :'warning'})}
 
 </script>
 
 
 <style scoped lang="less">
  .head{
     float: right;
  }
 .el-input{
     width: 400px;
     height: 40px;
 }



 .demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.el-table__row{
    height: 30px;
}

 </style>